<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-row>
      <a-col :span="24" style="width: 100%; margin-bottom: 10px">
        <a-form-model layout="inline" :model="formInline">
          <a-form-model-item label="学校名称">
            <a-input v-model="keyWordInput" allowClear style="width: 250px" placeholder="请输入学校名称" />
          </a-form-model-item>
          <a-form-model-item label="学校类别">
            <a-select default-value="全部" style="width: 200px" @change="handleChangeType">
              <a-select-option :value="item.dictCode" v-for="(item, index) in schoolTypeInfo" :key="index">
                {{ item.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="状态">
            <a-select default-value="全部" style="width: 200px" @change="handleChange">
              <a-select-option value="1"> 启用 </a-select-option>
              <a-select-option value="0"> 禁用 </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" html-type="submit" @click="serch">搜索</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="addSchool" v-if="isAdmin">添加学校</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
      <a-drawer :title="title" placement="right" :closable="false" :visible="visible"
        :after-visible-change="afterVisibleChange" @close="onClose" width="400px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="学校名称" prop="schoolName">
            <el-input v-model="ruleForm.schoolName"></el-input>
          </el-form-item>
          <el-form-item label="学校编码" prop="schoolCode">
            <el-input v-model="ruleForm.schoolCode"></el-input>
          </el-form-item>
          <el-form-item label="学校地址" prop="schoolAddress">
            <el-input v-model="ruleForm.schoolAddress"></el-input>
          </el-form-item>
          <el-form-item label="所属分类" prop="schoolType">
            <el-select v-model="ruleForm.schoolType" placeholder="请选择学校类型" style="width: 100%;">
              <el-option :value="item.dictCode" v-for="(item, index) in schoolTypeInfo" :key="index" :label="item.dictLabel"></el-option>
              <!-- <el-option label="小学" value="0"></el-option>
              <el-option label="初中" value="1"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="教职工人数" prop="teacherCount">
            <el-input v-model="ruleForm.teacherCount"></el-input>
          </el-form-item>
          <el-form-item label="学生人数" prop="studentCount">
            <el-input v-model="ruleForm.studentCount"></el-input>
          </el-form-item>
          <el-form-item label="学校描述" prop="describe">
            <el-input v-model="ruleForm.describe"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </a-drawer>
    </a-row>
    <a-table :pagination="false" :row-selection="rowSelection" :columns="columns" :data-source="schoolData" bordered
      :rowKey="(record, index) => { return index }">
      <span slot="school_status" slot-scope="school_status">
        <span v-if="school_status == 1">启用</span>
        <span v-if="school_status == 0">禁用</span>
      </span>
      <span slot="action" slot-scope="text, record">
        <a @click="getStudentBySchoolId(record)" style="color: #ff4d4f;">查看学生</a>
        <a style="margin-left: 20px;color: #ff4d4f;"  @click="getTeacherBySchoolId(record)" >查看教职工</a>
        <a style="margin-left: 20px;color: #ff4d4f;" @click="viewSchoolDetail(record)">学校详情</a>
        <!-- <a-icon
          type="edit"
          @click="editSchool(record)"
          style="margin-left: 20px"
        />
        <a-icon
          type="delete"
          style="margin-left: 20px"
          @click="showDeleteConfirm(record)"
        /> -->
      </span>
    </a-table>
    <a-pagination style="margin: 10px 0" v-model="current" :page-size-options="pageSizeOptions" :total="total"
      show-size-changer :page-size="pageSize" @showSizeChange="onShowSizeChange" @change="pageChange">
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      </template>
    </a-pagination>
    <a-drawer :title="title" placement="right" :closable="true" :visible="teacherVisible"
      :headerStyle="{ 'padding-top': '20px' }" width="800px" :after-visible-change="afterVisibleChange" zIndex="2"
      @close="onTeacherClose">
      <div>
        <a-input placeholder="请输入教职工姓名" v-model="teacherName" allow-clear style="width: 300px"></a-input><a-button
          @click="seachTeacher" type="primary" icon="search" style="margin-left: 15px">
          搜索
        </a-button>
      </div>

      <!-- 教职工列表 -->
      <a-table :columns="teacherColumns" :data-source="teacherInfo" :rowKey="(record, index) => { return index }"
        style="margin-top: 20px;height: calc(100vh - 200px);overflow-y: scroll;" :pagination="false"></a-table>
      <el-pagination style="margin-top: 10px;" @size-change="teacherhandleSizeChange"
        @current-change="teacherhandleCurrentChange" :current-page="looksTeacherPages.teacherPage"
        :page-sizes="[10, 20, 30, 100, 200, 300]" :page-size="looksTeacherPages.teacherSize" background
        layout="total, sizes, prev, pager, next, jumper" :total="looksTeacherPages.teacherTotal">
      </el-pagination>
    </a-drawer>

    <a-drawer :title="title" placement="right" :closable="true" :visible="studentVisible"
      :headerStyle="{ 'padding-top': '20px' }" width="800px" :after-visible-change="afterVisibleChange" zIndex="2"
      @close="onStudentClose">
      <div style="display: inline-block;">
        <el-input size="small" placeholder="请输入学生姓名" clearable v-model="studentName" style="width: 250px"></el-input>

        <el-select size="small" clearable v-model="looksStudentPages.grade" placeholder="请选择所在年级"
          style="width: 200px;margin-left: 10px">
          <el-option v-for="(item, index) in classType" :key="index" :label="item.dictLabel" :value="item.dictCode + ''">
          </el-option>
        </el-select>

        <a-button @click="seachStudent" type="primary" icon="search" style="margin-left: 15px">
          搜索
        </a-button>
      </div>
      <!-- 学生列表 -->
      <a-table :columns="studentColumns" :data-source="studentInfo"
        style="margin-top: 20px;height: calc(100vh - 300px);overflow-y: scroll;" :pagination="false"
        :rowKey="(record, index) => { return index }">
      </a-table>
      <el-pagination style="margin-top: 10px;" @size-change="studenthandleSizeChange"
        @current-change="studenthandleCurrentChange" :current-page="looksStudentPages.studentPage"
        :page-sizes="[10, 20, 30, 100, 200, 300]" :page-size="looksStudentPages.studentSize" background
        layout="total, sizes, prev, pager, next, jumper" :total="looksStudentPages.studentTotal">
      </el-pagination>
    </a-drawer>

    <a-modal v-model="qwe" :title="title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 返回 </a-button>
        <a-button v-if="submitStatus != 3" key="submit" type="primary" :loading="loading" @click="handleOk">
          提交
        </a-button>
      </template>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="学校名称">
          <span>{{ schoolDetailInfo.school_name }}</span>
        </a-form-item>
        <a-form-item label="描述">
          <span>{{ schoolDetailInfo.school_referred }}</span>
        </a-form-item>
        <a-form-item label="学校类型">
          <span>{{ schoolDetailInfo.school_type }} </span>
        </a-form-item>
        <a-form-item label="学校状态">
          <span v-if="schoolDetailInfo.school_status == 1">启用</span>
          <span v-if="schoolDetailInfo.school_status == 0">禁用</span>
        </a-form-item>
        <a-form-item label="学校编码">
          <span>{{ schoolDetailInfo.school_code }}</span>
        </a-form-item>
        <!-- <a-form-item label="班级数">
      <span>{{ schoolDetailInfo. classNum}}</span>
    </a-form-item> -->
        <a-form-item label="学生数">
          <span>{{ schoolDetailInfo.school_student }}</span>
        </a-form-item>
        <!-- <a-form-item label="教职工数">
     <span>{{ schoolDetailInfo.school_tearcher }}</span>
    </a-form-item> -->
      </a-form>
    </a-modal>

    <a-drawer title="学校详情" placement="right" :closable="false" :visible="schoolVisible" width="600"
      :after-visible-change="afterVisibleChange" @close="onCloseSchools">
      <a-form-model ref="schoolruleForm" :model="schoolform" :rules="schoolrules" :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-form-model-item label="学校id" prop="id">
          <a-input v-model="schoolform.id" disabled />
        </a-form-model-item>
        <a-form-model-item ref="floorSpace" label="建筑面积(m2)" prop="floorSpace">
          <a-input v-model="schoolform.floorSpace" @blur="() => {
              $refs.floorSpace.onFieldBlur();
            }
            " />
        </a-form-model-item>
        <a-form-model-item ref="coverSpace" label="占地面积(m2)" prop="coverSpace">
          <a-input v-model="schoolform.coverSpace" @blur="() => {
              $refs.coverSpace.onFieldBlur();
            }
            " />
        </a-form-model-item>
        <a-form-model-item label="招生办电话" prop="phone">
          <a-input v-model="schoolform.phone" />
        </a-form-model-item>
        <a-form-model-item label="学校官网" prop="school_site">
          <a-input v-model="schoolform.schoolSite" />
        </a-form-model-item>
        <a-form-model-item label="学校描述" prop="school_description">
          <a-input v-model="schoolform.schoolDescription" type="textarea" :auto-size="{ minRows: 6 }" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
          <a-button type="primary" @click="schoolonSubmit"> 提交 </a-button>
          <a-button style="margin-left: 10px" @click="schoolresetForm">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-drawer>
  </div>
</template>

<script>

const teacherColumns = [
  {
    title: "教职工姓名",
    dataIndex: "teacher_name",
  },
  {
    title: "状态",
    dataIndex: "conditionName",
  },
  {
    title: "所教课程",
    dataIndex: "subjectName",
  },
];
const studentColumns = [
  {
    title: "学生姓名",
    dataIndex: "student_name",
  },
  {
    title: "学生类型",
    dataIndex: "studentTypeName",
  },
  {
    title: "年级",
    dataIndex: "gradeName",
  },
  {
    title: "状态",
    dataIndex: "newStatusName",
  },
];
const columns = [
  {
    title: "学校名称",
    dataIndex: "ORGNAME",
  },
  // {
  //   title: "描述",
  //   dataIndex: "school_description",
  // },
  {
    title: "地址",
    dataIndex: "address",
  },
  {
    title: "学校代码",
    dataIndex: "ORGCODE",
  },
  {
    title: "教职工人数",
    dataIndex: "teacher_num",
  },
  {
    title: "学生人数",
    dataIndex: "student_num",
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
  },
  {
    title: "状态",
    dataIndex: "STATUS",
    scopedSlots: { customRender: "school_status" },
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];

import contacts from "@/api/organizations";
import teacher from "@/api/teacherManage";
import school from "@/api/schoolManagement";
import student from "@/api/studentList";
export default {
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      other: "",
      schoolform: {
        id: "",
        floorSpace: "",
        coverSpace: "",
        phone: "",
        schoolSite: "",
        schoolDescription: "",
      },
      schoolrules: {
        floorSpace: [
          { required: true, message: "请输入建筑面积", trigger: "blur" },
        ],
        coverSpace: [
          { required: true, message: "请输入占地面积", trigger: "blur" },
        ],
      },
      teacherColumns,
      teacherVisible: false,
      studentVisible: false,
      schoolVisible: false,
      formInline: {},
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      title: "",
      schoolData: [],
      teacherName: "",
      submitStatus: 0,
      studentColumns,
      schoolDetailInfo: {
        school_student: 0,
        school_tearcher: 0,
      },
      ruleForm: {
        schoolName: "",
        schoolCode: "",
        schoolAddress: "",
        schoolType: "",
        teacherCount: "",
        studentCount: "",
        describe: "",
      },
      rules: {
        schoolName: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度必须大于三个字符",
            trigger: "blur",
          },
        ],
        schoolCode: [
          { required: true, message: "请输入学校编码", trigger: "change" },
        ],
        schoolAddress: [
          { required: true, message: "请输入学校地址", trigger: "change" },
        ],
        schoolType: [
        { required: true, message: "请选择学校分类", trigger: "change" },
        ],
        teacherCount: [
          { required: true, message: "请输入教职工人数", trigger: "change" },
        ],
        studentCount: [
          { required: true, message: "请输入学生人数", trigger: "blur" },
        ],
        describe: [
          { required: true, message: "请输入学校描述", trigger: "blur" },
        ],
      },
      schoolTypeInfo: [],
      visible: false,
      columns,
      selectedRowKeys: [],
      keyWordInput: "",
      selectValue: "",
      selectTypeValue: "",
      total: 0,
      current: 1,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      pageSize: 10,
      pageNo: 1,

      studentPageNo: 1,
      looksTeacherPages: {
        teacherPage: 1,
        teacherSize: 10,
        teacherTotal: 0,
      },

      studentName: "",
      looksStudentPages: {
        studentPage: 1,
        studentSize: 10,
        studentTotal: 0,
        grade: '',
        schoolCode: '',
      },
      schoolId: "",
      studentInfo: [],
      teacherInfo: [],
      teacherTotal: 0,
      schoolFlag: 0,
      isAdmin:false
    };
  },
  computed: {},
  mounted() {
    this.getRoleByUser();
    this.getSchoolInfo();
    this.getSchoolType();
  },
  methods: {
    getRoleByUser() {
      contacts.getRoleByUser().then((res) => {
        // this.roleId = res.data.data.deptCodeRole[0].code;
        for (let i = 0; i < res.data.data.deptCodeRole.length; i++) {
          if (res.data.data.deptCodeRole[i].code == "t001") {
            this.isAdmin = true;
          }
        }
      });
    },
    // 所在年纪options
    getClassType() {
      contacts.getClassType().then((res) => {
        this.classType = res.data.data.dictionaries;
      });
    },
    //查看学校详情
    viewSchoolDetail(val) {
      this.schoolform = {
        id: "",
        floorSpace: "",
        coverSpace: "",
        phone: "",
        schoolSite: "",
        schoolDescription: "",
      };
      this.schoolform.id = val.ID;
      this.schoolform.coverSpace = val.cover_space;
      this.schoolform.floorSpace = val.floor_space;
      this.schoolform.schoolDescription = val.school_description;
      this.schoolform.phone = val.phone
      // this.getSchoolDetailByid();
      this.schoolVisible = true;
    },
    afterVisibleChange(val) {
      // console.log("visible", val);
    },
    // async getSchoolDetailByid() {
    //   let res = await school.getSchoolDetailsBySchoolId(this.schoolform.id);
    //   if (res.data.errcode == 0) {
    //     if (res.data.rows.id) {
    //       this.schoolFlag = 1;
    //       this.schoolform = res.data.rows
    //     } else {
    //       this.schoolFlag = 0;
    //     }
    //   }
    // },
    schoolonSubmit() {
      this.$refs.schoolruleForm.validate((valid) => {
        if (valid) {
          //0
          school.updateSchoolDetails(this.schoolform).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("修改成功");
              this.schoolVisible = false;
            } else if (res.data.code == 400) {
              this.$message.error("暂无权限");
              this.schoolVisible = false;
            } else {
              this.$message.error("系统错误,请联系管理员");
            }
          });
          //1
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    schoolresetForm() {
      this.$refs.schoolruleForm.resetFields();
    },

    onCloseSchools() {
      this.schoolVisible = false;
    },
    getTeacherBySchoolId(val) {
      this.teacherVisible = true;
      this.schoolId = val.id;
      this.getTeacherInfo();
    },
    getTeacherInfo() {
      let data = {
        schoolCode: this.schoolId,
        teacherName: this.teacherName,
        page: this.looksTeacherPages.teacherPage,
        size: this.looksTeacherPages.teacherSize,
      };
      teacher.getTeacher(data).then(res => {
        this.teacherInfo = res.data.data.data;
        this.looksTeacherPages.teacherTotal = res.data.data.total;
      }, err => {
        console.log(err)
      })
    },
    teacherhandleCurrentChange(val) {
      this.looksTeacherPages.teacherPage = val
      this.getTeacherInfo()
    },
    teacherhandleSizeChange(val) {
      this.looksTeacherPages.teacherSize = val
      this.getTeacherInfo()
    },

    studenthandleCurrentChange(val) {
      this.looksStudentPages.studentPage = val
      this.getStudentInfo()
    },
    studenthandleSizeChange(val) {
      this.looksStudentPages.studentSize = val
      this.getStudentInfo()
    },
    onShowSizeStudentChange(current, pageSize) {
      this.studentPageSize = pageSize;
      this.getStudentInfo();
    },
    studentPageChange(val) {
      this.studentCurrent = val;
      this.getStudentInfo();
    },
    seachStudent() {
      this.getStudentInfo();
    },
    seachTeacher() {
      this.getTeacherInfo();
    },
    onStudentClose() {
      (this.studentCurrent = 1),
        (this.studentPageSize = 10),
        (this.studentVisible = false);
    },
    onTeacherClose() {
      (this.studentCurrent = 1),
        (this.studentPageSize = 10),
        (this.teacherVisible = false);
    },
    getStudentBySchoolId(val) {
      this.studentVisible = true;
      this.title = "学生列表";
      this.schoolId = val.school_id;
      this.looksStudentPages.schoolCode = val.id,
      this.looksStudentPages.grade = ''
      this.getClassType()
      this.getStudentInfo();
    },
    afterVisibleChange(val) {
      // console.log("visible", val);
    },

    //学校管理里的 查看学生
    getStudentInfo() {
      let data = {
        schoolId: this.schoolId,
        newStatus:"170",
        studentName: this.studentName,
        schoolCode:this.looksStudentPages.schoolCode,
        page: this.looksStudentPages.studentPage,
        size: this.looksStudentPages.studentSize,
        grade: this.looksStudentPages.grade
      };
      student.selectAllStudent(data).then((res) => {
        this.looksStudentPages.studentTotal = res.data.data.total
        this.studentInfo = res.data.data.students
      })
    },

    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.resetForm("ruleForm");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChangeType(value) {
      this.selectTypeValue = value;
    },
    handleChange(value) {
      this.selectValue = value;
    },
    getSchoolType() {
      school.getSchoolType().then((res) => {
        this.schoolTypeInfo = res.data.data.dictionaries;
      });
    },
    getSchoolDetail(val) {
      this.title = "学校详情";
      this.schoolDetailInfo = val;
      this.submitStatus = 3;
      //this.visible = true;
    },
    getSchoolInfo() {
      let data = {
        page: this.current,
        size: this.pageSize,
        status: this.selectValue,
        schoolType: this.selectTypeValue,
        schoolName: this.keyWordInput,
      };
      school.getSchoolInfo(data).then((res) => {
        this.schoolData = res.data.data.schools;
        this.total = res.data.data.total;
      });
    },
    pageChange() {
      this.getSchoolInfo();
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getSchoolInfo();
    },
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    showDeleteConfirm(obj) {
      let that = this;
      this.$confirm({
        title: "您确定要删除这条数据吗",
        content: "此操作可能有风险",
        okText: "确定",
        okType: "danger",
        cancelText: "否",
        onOk() {
          //   contacts.delOrg(obj).then((res) => {
          //     if (res.data == "删除成功") {
          //       that.$message.success("删除成功");
          //       that.getInit();
          //     }
          //   });
        },
        onCancel() { },
      });
    },
    serch() {
      this.getSchoolInfo();
    },
    addSchool() {
      this.title = "添加学校";
      this.visible = true;
    },
    editSchool(value) {
      this.title = "修改学校";
    },
    deleteSchool(value) { },
  },
};
</script>

<style lang="less" scoped>
.ant-layout-header {
  background: #03212100 !important;
}

.vtl {
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}
</style>
